<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.min.js"></script>
	<link href="../webjars/bootstrap/3.3.7-1/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/material-teal/easyui.css" />
	<link rel="stylesheet" href="../static/jquery-easyui-1.5.5.3/themes/icon.css" />
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
	$(function(){
		$("#t_user").datagrid({
			idField: 'id',
			title: '用户列表',
			width: '100%',
			fitColumns: true,
			striped: true,
			loadMsg: '数据正在加载...',
			rownumbers: true,
			url: 'list',
			frozenColumns: [
				[
					{     
						field: 'ck',
						width: 50,
						checkbox: true
					}
				]
			],
			columns: [
				[
					{
						field: 'id',
						title: 'id',
						width: 100,
						align: 'center'
					},{
						field: 'username',
						title: '用户名',
						width: 150,
						align: 'center'
					},{
						field: 'name',
						title: '姓名',
						width: 150,
						align: 'center'
					},{
						field: 'remark',
						title: '备注',
						width: 150,
						align: 'center'
					},{
						field: 'aaa',
						title: '操作',
						width: 150,
						align: 'center',
						formatter:add
					}
				]
			],
			pagination: true,
			pageSize:5,
			pageList: [ 5, 10, 20, 25, 50],
			toolbar:[
				{
					text: '新增用户',
					iconCls: 'icon-add',
					handler: function(){
						$('#mydialog').dialog({
							title: '新增用户'
						});
						//清空form表单
						//$('#myform').get(0).reset();
						$('#myform input').val("");
						$('#mydialog').dialog('open');
					}
				},{
					text: '修改用户',
					iconCls: 'icon-edit',
					handler: function(){
						//getSelections选中的对象，返回一个数组
						var arr = $('#t_user').datagrid('getSelections');
						if(arr.length != 1){
							$.messager.show({
								title: '提示信息',
								msg: '只能选中一行记录进行修改！'
							});
						}else{
							//更改标题
							$('#mydialog').dialog({
								title: '修改用户'
							});
							//打开窗口
							$('#mydialog').dialog('open');
							//清空form表单
							//$('#myform').get(0).reset();
							$('#myform input').val("");
							$('#myform').form('load', {  //把选中的数据放入到form表单中
								id:arr[0].id,
								name:arr[0].name,
								username:arr[0].username,
								password:arr[0].password,
								remark:arr[0].remark,
								lesseeAdmin:arr[0].lesseeAdmin.id
							});
						}
					}
				},{
					text: '删除用户',
					iconCls: 'icon-remove',
					handler: function(){
						var arr = $('#t_user').datagrid('getSelections');
						if(arr.length <= 0){
							$.messager.show({
								title: '提示信息',
								msg: '至少选中一行记录进行删除！'
							});
						}else{
							//提示是否确认删除
							$.messager.confirm('提示信息', '确认删除'+arr.length+'条数据？', function(r){
								if(r){
									var ids = '';
									for(var i = 0; i < arr.length; i++){
										ids += arr[i].id + ',';
									}
									ids = ids.substring(0, ids.length-1);   //去掉最后一个，号
									
									$.post('delete', {ids: ids}, function(){
										//刷新数据表格
										$('#t_user').datagrid('reload');
										//清空IDfield
										$('#t_user').datagrid('unselectAll');
										//提示信息
										$.messager.show({
											title: '提示信息',
											msg: '操作成功！'
										});
									});
								}else{
									return ;
								}
							});
						}
					}
				}
			]
		});
		
		function add(value,row,index){
	  		return "<a class='easyui-linkbutton' onclick='fun_1("+row.id+");'>重置密码</a>";
	  	}
		
		//提交表单方法
		$("#btn1").click(function(){
			if($('#myform').form('validate')){
				$.ajax({
					type: 'post',
					url: 'save',
					cache: false,   //清除缓存
					data: $('#myform').serialize(),
					dataType: 'json',
					success: function(data){
						//关闭窗口
						$("#mydialog").dialog('close');
						//reload刷新datagrid表格
						$('#t_user').datagrid('reload');
						//提示信息
						$.messager.show({
							title: '提示信息',
							msg: '操作成功！'
						});
					} 
				});
			}else{
				$.messager.show({
					title: '提示信息',
					msg: '数据验证不通过，不能保存'
				});
			}
		});
		
		//关闭窗口按钮
		$("#btn2").click(function(){
			$("#mydialog").dialog('close');
		});
		
		//查询
		$('#searchbtn').click(function(){
			$('#t_user').datagrid('load', serializeForm($('#mysearch').form()));
		});
		//清除查询
		$('#clearbtn').click(function(){
			//清空form表单
			$('#mysearch').form('clear');
			$("#t_user").datagrid('load', {});
		});
	});
	
	function fun_1(id){
		if(confirm("你确定重置密码吗？")){
			$.post('cz', {id: id}, function(data){
				alert(data);
			});
		}
	}
	
	//js方法，序列化表单
	function serializeForm(form){
		var obj = {};
		$('#id').val("1");
		$.each(form.serializeArray(), function(index){
			if(obj[this['name']]){
				obj[this['name']] = obj[this['name']] + ',' + this['value'];
			}else{
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	}
</script>
<style type="text/css">
	#ss{
		margin: 20px;
	}
</style>
</head>
<body>
	<div id="ss"> 
		<form id="mysearch" method="post">
			<input type="hidden" name = "id" id="id">
			<div class="col-md-3">			
				<div class="input-group">
					<span class="input-group-addon">用户名</span>
					<input type="text" class="form-control" name="username" placeholder="用户名">
				</div>
			</div>
			<div class="col-md-3">
				<div class="input-group">
					<span class="input-group-addon">姓名</span>
					<input type="text" class="form-control" name="name" placeholder="姓名">
				</div> 
			</div>
			<div class="btn-group">
			<button id="searchbtn" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> 查询</button>
				<button id="clearbtn" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> 清空</button>
			
			</div>
		</form>
	</div>
	<table id = "t_user"></table>
	
	<div id="mydialog" title="新增用户" modal=true draggable=false class="easyui-dialog" closed=true style="width:300px;">
		<form action="" method="post" id = "myform">
			<table>
				<tr>
					<input type="hidden" name = "id" value="">
					<input type="hidden" name = "password" value="">
					<input type="hidden" name = "lesseeAdmin" class="easyui-validatebox" value="">
					<td>用户名：</td>
					<td><input type="text" name = "username" class="easyui-validatebox" required=true label="用户名" missingMessage="用户名必填!" value="" ></td>
				</tr>
				<tr>
					<td>姓名：</td>
					<td><input type="text" name = "name" class="easyui-validatebox" required=true missingMessage="姓名必填!" value="" ></td>
				</tr>
				<tr>
					<td>备注：</td>
					<td><input type="text" name = "remark" class="easyui-validatebox" value="" ></td>
				</tr>
				<td colspan="2" align="center">
					<a id="btn1" class="easyui-linkbutton">确定</a>
					<a id="btn2" class="easyui-linkbutton">关闭</a>
				</td>
			</table>
		</form>
	</div>
</body>
</html>